<!-- 年规 - 员工业绩 - 主页 -->
<template>
  <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
    <template #top>
      <view>
        <view class="px-4 c-#333 text-40 my-3">业绩完成单</view>
        <view class="px-1">
          <u-tabs v-model="state.tabIndex" :list="state.tabList" bg-color="none" bar-height="6" bar-width="44"
            active-color="#F4AF22" inactive-color="#000000" font-size="32" @change="refresh" />
        </view>
        <view class="grid grid-cols-2 gap-3 px-4">
          <view class="card-style">
            <view class="c-#333 text-40">{{ numFormat(state.employeeDetail?.annual_target || 0) }}W</view>
            <view class="c-#999 text-24 mt-1">总目标</view>
          </view>
          <view class="card-style">
            <view class="c-#333 text-40">{{ numFormat(state.employeeDetail?.finish_money || 0) }}W</view>
            <view class="c-#999 text-24">已完成目标</view>
          </view>
          <view class="card-style">
            <view class="c-#333 text-40">{{ numFormat(state.employeeDetail?.percentage_complete || 0) }}%</view>
            <view class="c-#999 text-24">已完成率</view>
          </view>
          <view class="card-style">
            <view class="c-#333 text-40">{{ state.employeeDetail?.order_number || 0 }}</view>
            <view class="c-#999 text-24">成单数量</view>
          </view>
        </view>
        <view class="flex items-center my-4 px-4">
          <view class="flex-1 c-#333 text-40">业绩记录</view>
          <view class="flex-shrink-0 flex items-center">
            <image class="w-28 h-28" src="/static/images/common/ic_plan_add.jpg"></image>
            <view class="c-#f4af22 text-28 ml-2" @click="navigate(`/package_plan/pages/performance/user/add?employeeId=${currentUser.id}&&type=add`)">添加业绩</view>
          </view>
        </view>
      </view>
    </template>
    <view class="px-4">
      <view class="item-style flex relative" v-for="(item, index) in state.list" :key="index">
        <view class="flex-1"  
        @click="navigate(`/package_plan/pages/performance/user/add?employeeId=${currentUser.id}&&money=${item.money}&deal_time=${item.deal_time}&&type=edit&&log_id=${item.id}`)">
          <view class="flex items-center c-#333 text-32">
            <view> {{ numFormat(item.money || 0) }}{{ currency?.value == 1 ? '$': '¥' }}</view>
           <image class="w-13 h-24 ml-1" src="/static/images/home/ic_more.png"/>
          </view>
          <view class="c-#999 text-24">成交金额</view>
        </view>
        <view class="flex-shrink-0 flex flex-col items-end ">
          <view class="c-#515151 text-28">{{ item.deal_time }}</view>
          <view class="c-#999 text-24">成交时间</view>
        </view>
        <view class="absolute bottom-0 right-0" @click.stop="onDelete(item)">
          <image class="w-70 h-59" src="/package_plan/static/images/ic_delete_reverse.png" />
        </view>
      </view>
    </view>
  </z-paging-list>
</template>
<script setup>
import { numFormat } from '@/common/util/format';
import { navigate, showModal, showToast } from '@/common/util/uni';
import { getTargetDetail, getEmployeeDetail, getEmployeeRecordList, deleteEmployeeRecord } from '@/common/http/module/plan'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const list = ref();
const state = reactive({
  employeeDetail: '',
  tabList: [],
  tabIndex: 0,
  list: [],
});

const currentUser = computed(() => state.tabList.length > 0 ? state.tabList[state.tabIndex] : '')

const currency = computed(() => planStore.currency)

function loadTargetDetail() {
  getTargetDetail(userStore.currentSocietyId, planStore.year).then(res => {
    state.tabList = res.data?.employee?.map(item => {
      return {
        ...item,
        name: item.user?.nickname,
      }
    })

    refresh()
  })
}

function loadEmployeeDetail() {
  if (!currentUser.value) return
  getEmployeeDetail(currentUser.value.id).then(res => {
    state.employeeDetail = res.data
  })
}

function loadData(page) {
  if (!currentUser.value) return
  getEmployeeRecordList(currentUser.value.id, page).then(res => {
    list.value.onLoadResult(res.data.data || [])
  }).catch(() => {
    list.value.onLoadResult([])
  })
}

function refresh() {
  list.value.onRefresh()
  loadEmployeeDetail()
}

function onDelete(item) {
  showModal({
    content: '确定要删除这条业绩记录吗？',
    confirmText: '取消',
    cancelText: '确定',
    success: ({ confirm }) => {
      if (confirm) return
      deleteEmployeeRecord(item.id).then(() => {
        showToast('删除成功')
        refresh()
      })
    }
  })
}

onLoad(() => loadTargetDetail())

defineExpose({ refresh })
</script>

<style lang="scss" scoped>
.card-style {
  padding: 30rpx 56rpx;
  width: 338rpx;
  height: 148rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.item-style {
  padding: 26rpx 94rpx 26rpx 30rpx;
  margin-top: 20rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
